<template>
  <div class="subPage">
    <nav-bar
    v-if="!isComponent"
    :title="navTitle" 
    position="center" 
    color='linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%)' 
    :rowColor="'white'" 
    :goBack="goBack" 
    :isMsg='false' 
    fontColor='#fff' ></nav-bar>
    <div class="flexContent" >
      <scroll-view 
      :scroll-y="true"  
      v-if="recordList.length>0"
      style="height:100%;flex:1;overflow-y: scroll;"
      :refresher-triggered="triggered" 
      :refresher-enabled="enabled" 
      @refresherrefresh="queryList"
      @scrolltolower="queryMore"
      :scroll-with-animation='true'
      >
        <div class="addressBox" v-for="(item,i) in recordList" :key="i" >
          <span class="leftIcon">
            <img src="/static/images/map.png" alt="">
          </span>
          <span class="addressMsg" @click="returnChooseAddress(item)">
            <div class="msgBox1" >
              {{item.placepointname}}
            </div>
            <div class="msgBox2" >
              联系电话:{{item.tel?item.tel:'暂无'}}
            </div>
            <div class="msgBox2">
              {{item.address}}
            </div>
          </span>
          <div class="opearet borderBtm" v-if="false">
            <span @click="changeCheck(item,i)">
              <img
                :src="item.is_default== 1 ? mycheckedImg : uncheckedImg"
                class="checked-image"
                alt=""
              />
              <span :class="{'blueColor':item.is_default== 1}" >{{item.is_default== 1  ? '默认地址' : '设为默认'}}</span>
            </span>
            <p class="edit">
              <span @click="clickEditBtn(false,item)" >
                <img :src="editPeoImg" alt="" />
                编辑
              </span>
              <span @click="clickEditBtn(true,item)" >
                <img :src="deletePeoImg" alt="" />
                删除
              </span>
            </p>
          </div>
        </div>
      </scroll-view>
      <div v-if="triggered&&recordList===0" class="noDataImg">
        <img class="noneAddress" :src="noDataImg"/>
        <span>暂无门店地址</span>
      </div>
      <div :class="{'ipxBottom':ifIphonex}" ></div>
      <!-- 新增、编辑地址弹窗 层-->
      <div class="initTop" v-if="editAddressModal">
        <div class="addressDiv">
          <div class="item clearfix borderBtm">
            <div class="name fl">收货人姓名</div>
            <input
              class="fr ipt"
              placeholder="请填写收货人姓名"
              v-model="postFrom.receive_name"
              type="text"
              maxlength="20"
            />
          </div>
          <div class="item clearfix borderBtm">
            <div class="name fl">手机号码</div>
            <input
              class="fr ipt"
              placeholder="请填写手机号码"
              type="number"
              maxlength="11"
              v-model="postFrom.phone"
            />
          </div>
          <picker mode="region" @change="regionChange" :value="region">
            <div class="item clearfix borderBtm nowrap">
              <div class="name fl">所在地区</div>
              <div class="fr ipt">
                <span v-if="region[0] !== ''">{{ region[0] }}{{ region[1] }}{{ region[2] }}</span>
                <span v-else style="color:#808080">请选择所在地区</span>
              </div>
            </div>
          </picker>
          <div class="item clearfix borderBtm">
            <div class="name fl">邮政编码</div>
            <input
              class="fr ipt"
              placeholder="邮政编码"
              type="number"
              maxlength="6"
              v-model="postFrom.postal_code"
              disabled
            />
          </div>
          <div class="item clearfix borderBtm">
            <div class="name fl">详细地址</div>
            <input
              class="fr ipt"
              placeholder="请填写详细地址"
              type="text"
              maxlength="50"
              v-model="postFrom.detail_address"
            />
          </div>
          <div class="opearet borderBtm">
            <span @click="postFrom.is_default=!postFrom.is_default">
              <img
                :src="postFrom.is_default ? mycheckedImg : uncheckedImg"
                class="checked-image"
                alt=""
              />
              <span :class="{'blueColor':postFrom.is_default}">{{postFrom.is_default?'默认地址':'设为默认'}}</span>
              </span>
          </div>
        </div>
        <div class="submitBtn">
            <span class="recode" @click="editAddress">保存</span>
            <img :src="btnBgImg" alt="">
        </div>
      </div>
    </div>
    <div class="modal" v-if="visible">
        <div class="out">
            <div class="top" >
                <span>您确定要删除此收货地址吗？</span>
            </div>
            <div class="btm">
                <span @click='visible=false'>取消</span>
                <span @click="deleteAdress">确定</span>
            </div>
        </div>
    </div>
    <i-message id="message" />
    <i-toast id="toast" />
  </div>
</template>
<script>
import api from "@/api/api";
import storage from "@/utils/storage";
import navBar from '@/components/navBar'
import { mapState } from 'vuex'
const { $Toast, $Message } = require("../../../../../static/iview/base/index");
export default {
  components: {
    navBar
  },
  computed: {
    ...mapState([
      'ifIphonex'
    ])
  },
  props: {
    isComponent: Boolean || false
  },
  data() {
    return {
      userInfo: {},
      visible:false,
      postFrom: {
        receive_name: "",
        province_name: "",
        province_code: "",
        city_name: "",
        city_code: "",
        district_name: "",
        district_code: "",
        detail_address: "",
        phone: "",
        // order_no: "",
        postal_code: "",
        is_default: false
      },
      region: ["", "", ""],
      imgUrl: "",
      mycheckedImg: '',
      uncheckedImg: '',
      editPeoImg: '',
      deletePeoImg: '',
      noDataImg: '',
      rightImg: '',
      btnBgImg: '', 
      editAddressModal: false,
      navTitle: "自提",
      recordList: [],
      triggered: false,
      enabled: true,
      nowDeleteItem: {},
      nowEditItem: {},
      isEdit:false,
      page: 1,
      rows: 10,
      total: 0
    };
  },
  onLoad(options) {
    Object.assign(this.$data, this.$options.data())
    this.imgUrl = api.imgUrl;
    this.userInfo = this.$storage.getAccountInfo();
    console.log("this.userInfo", this.userInfo);
    // this.postFrom.receive_name = this.userInfo.patient_name;
    // this.postFrom.phone = this.userInfo.phone;
    this.postFrom.receive_name = "";
    this.postFrom.phone = "";
    this.postFrom.detail_address = "";
    this.postFrom.postal_code = "";
    this.region[0] = "";
    this.mycheckedImg = this.imgUrl + 'mychecked.png'
    this.uncheckedImg = this.imgUrl + 'unchecked.png'
    this.editPeoImg = this.imgUrl + 'edit_peo.png'
    this.deletePeoImg = this.imgUrl + 'delete_peo.png'
    // this.noDataImg = this.imgUrl + 'noData.png'
    this.noDataImg = require("../../../../../static/images/noneAddress.png")
    this.rightImg = this.imgUrl + 'right.png'
    this.btnBgImg = this.imgUrl + "btnBg.png";
    this.queryList()
  },
  onUnload() {
    this.isEdit = false
    this.visible = false
    this.editAddressModal = false
    this.nowEditItem = {}
    this.nowDeleteItem = {}
  },
  methods: {
    // 给父组件返回所选择的地址
    returnChooseAddress (item) {
      if (!this.isComponent)  return
      // console.log('选中了',item)
      this.$emit('beingChooseAdress',item)
    },
    // 地区选择
    regionChange(e) {
      let that = this;
      console.log("e", e);
      that.code = e.mp.detail.code;
      let value = e.mp.detail.value;
      if (
        that.code[0] == "710000" ||
        that.code[0] == "810000" ||
        that.code[0] == "820000"
      ) {
        wx.showToast({
          title: '暂不支持该地区，请重新选择',
          icon: 'none',
          duration: 2000
        })
        return;
      }
      that.region = e.mp.detail.value;
      that.postFrom.postal_code = e.mp.detail.postcode;
      that.postFrom.province_name = that.region[0];
      that.postFrom.city_name = that.region[1];
      that.postFrom.district_name = that.region[2];
      that.postFrom.province_code = that.code[0];
      that.postFrom.city_code = that.code[1];
      that.postFrom.district_code = that.code[2];
    },
    // 获取更多数据
    queryMore () {
      this.page ++
      console.log(parseInt(this.total / 10) + 1)
      if(this.page > (parseInt(this.total / 10) + 1) ) {
        $Toast({
          content: "没有更多了",
          type: "info"
        });
        return
      }
      let param = {
        page: this.page + '',
        rows : this.rows + ''
      }
      this.$api.addStoreAddress(param, ({'showLoading':true})).then(res=>{
        this.recordList = this.recordList.concat(res.data.address_list)
      })
    },
    // 获取地址列表
    queryList() {
      this.triggered = true
      this.recordList = []
      this.page = 1
      let param = {
        page: '1',
        rows: '10'
      }
      this.$api.addStoreAddress(param, ({'showLoading':true})).then(res=>{
        this.total = res.data.total
        this.triggered = false
        this.recordList = res.data.address_list
      })
    },
    // 点击编辑 删除 按钮
    clickEditBtn(jud,item) {
      if (jud) {
        this.nowDeleteItem = item
        this.visible = true
      } else {
        this.nowEditItem = item
        this.isEdit = true
        this.region[0] = item.zones.province.name
        this.region[1] = item.zones.city.name
        this.region[2] = item.zones.area.name
        this.postFrom.detail_address = item.street
        this.postFrom.postal_code = item.zip_tag + ''
        this.postFrom.district_code = item.zone_id + ''
        this.postFrom.phone = item.phone
        this.postFrom.receive_name = item.consignee
        this.postFrom.is_default = item.is_default=='1'?true:false
        this.editAddressModal = true  // 显示编辑弹层
      }
    },
    // 删除地址
    deleteAdress() {
      this.$api.deleteAddress({id:this.nowDeleteItem.id},({'showLoading':true})).then(res=>{
        if (res.code==0) {
          $Toast({
            content: "删除成功",
            type: "success"
          });
        }
        setTimeout(() => {
          this.visible = false
          this.queryList()
        }, 500);
      })
    },
    // 设为默认地址
    changeCheck(item,index){
      let param = {
        consignee: item.consignee,
        id: item.id,
        phone: item.phone,
        street: item.street,
        zone_id: item.zone_id,
        is_default: '1',
        remark: '',
        zip_tag: item.zip_tag,
        patient_id: this.userInfo.patient_id
      }
      this.$api.editAddressInfo(param,({'showLoading':true})).then(res=>{
          if(res.code == 0) {
            this.recordList.forEach((ele,i)=>{
              this.$set(this.recordList[i],'is_default',0)
            })
            this.$set(this.recordList[index],'is_default',1)
            $Toast({
              content: "修改成功",
              type: "success"
            });
            // setTimeout(() => {
            //   this.queryList()
            // }, 500);
          }
        })
      console.log('设为默认地址')
    },
    // 编辑、新增地址 保存按钮
    editAddress() {
      if(this.postFrom.receive_name.trim()===''||
        this.postFrom.phone.trim()===''||
        this.postFrom.detail_address.trim()===''||
        this.postFrom.district_code.trim()==='') {
          $Toast({content:'请填写完整的地址信息'})
          return
        }
      let param = {
        consignee: this.postFrom.receive_name,
        phone: this.postFrom.phone,
        street: this.postFrom.detail_address,
        zone_id: this.postFrom.district_code,
        is_default: this.postFrom.is_default?'1':'0',
        remark: '',
        zip_tag: this.postFrom.postal_code,
        patient_id: this.userInfo.patient_id
      }
      console.log(param,'传参')
      if (this.isEdit) {
        param.id = this.nowEditItem.id
        this.$api.editAddressInfo(param,({'showLoading':true})).then(res=>{
          if(res.code == 0) {
            $Toast({
              content: "修改成功",
              type: "success"
            });
            setTimeout(() => {
              this.editAddressModal = false
              this.queryList()
            }, 500);
          }
        })
        return
      }
      this.$api.saveNewAddress(param,({'showLoading':true})).then(res=>{
        if(res.code == 0) {
          $Toast({
            content: "添加成功",
            type: "success"
          });
          setTimeout(() => {
            this.editAddressModal = false
            this.queryList()
          }, 500);
        }
      })
      this.editAddressModal = true
      this.navTitle = '收货地址'
    },
    // 新增地址
    addNewAddress() {
      this.isEdit = false;
      this.postFrom.receive_name = "";
      this.postFrom.phone = "";
      this.postFrom.detail_address = "";
      this.postFrom.postal_code = "";
      this.region[0] = "";
      this.editAddressModal = true;
      this.postFrom.is_default = false
    },
    goBack() {
      if (this.editAddressModal) {
        this.editAddressModal = false
        this.navTitle = '收货地址'
      } else {
        this.$router.go(-1)
      }
    }
  }
};
</script>
<style scoped lang="less">
.subPage {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.flexContent {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  .addressBox {
    // height: 264rpx;
    box-sizing: border-box;
    border-bottom: 16rpx solid #f9f9f9;
    background-color: #fff;
    display: flex;
    // flex-direction: column;
    .leftIcon {
      display: inline-block;
      height: 200rpx;
      width: 90rpx;
      img {
        height: 51rpx;
        width: 38rpx;
        margin-top: 57rpx;
        margin-left: 32rpx;
      }
    }
    .addressMsg {
      flex: 1;
      padding: 20rpx 0rpx;
      .msgBox1 {
        // height: 45%;
        color: #333333;
        font-size: 34rpx;
        font-weight: bold;
        padding: 15rpx 0 10rpx 0;
        span {
          margin-right: 15rpx;
          float: left;
        }
        span:nth-child(3) {
          float: right;
        }
        .name {
          display: inline-block;
          max-width: 200rpx;
          min-width: 120rpx;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
      .msgBox2 {
        // height: 54%;
        font-size: 30rpx;
        color: #666666;
        // border-bottom: 1rpx solid #E9E9E9;
        // overflow: hidden;
        // text-overflow:ellipsis;
        // white-space: nowrap;
        word-break: break-all;
        padding: 2rpx 20rpx 2rpx 0;
      }
    }
  }
  .blueColor {
    color: #4A71E8;
  }
  .noDataImg {
    flex: 1;
    position: relative;
    .noneAddress {
      height: 720rpx;
      width: 720rpx;
      left: 45%;
      top: 37%;
    }
    span {
      position: absolute;
      font-size: 32rpx;
      color: #CCCCCC;
      top: 61%;
      left: 30%;
    }
  }
  .ipxBottom {
    height: 30rpx;
  }
  .addBtn {
    position: relative;
    // height: 180rpx;
    // overflow: hidden;
    padding: 30rpx;
    box-sizing: border-box;
    .recode {
      display: flex;
      position: relative;
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      color: #fff;
      font-size: 36rpx;
      border: 1rpx solid #A0B7ED;
      span:nth-child(2) {
        flex: 1;
        text-align: left;
        height: 100%;
      }
      .plus {
        text-align: right;
        width: 38%;
        font-size: 60rpx;
        line-height: 80rpx;
        margin-right: 10rpx;
      }
    }
    .blueColor {
      color: #4A71E8;
    }
  }
  .submitBtn {
    position: relative;
    height: 140rpx;
    overflow: hidden;
    .recode {
      position: absolute;
      width: 100%;
      text-align: center;
      line-height: 50rpx;
      margin-top: 35rpx;
      color: #fff;
      font-size: 36rpx;
    }
    img {
      height: 100%;
      width: 100%;
    }
  }
}
.initTop {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 22;
  display: flex;
  flex-direction: column;
  .addressDiv {
    background: rgba(255, 255, 255, 1);
    flex: 1;
    width: 100%;
    border-radius: 10rpx;
    .init1 {
      height: 110rpx;
      line-height: 110rpx;
      padding-left: 39rpx;
      font-size: 34rpx;
      font-weight: bold;
    }
    .item {
      height: 100rpx;
      line-height: 100rpx;
      padding: 0 33rpx 0 34rpx;
      display: flex;
      .name {
        font-size: 34rpx;
        color: #333333;
      }
      .ipt {
        flex: 1;
        height: 100rpx;
        line-height: 100rpx;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 30rpx;
      }
    }
    .borderBtm {
      border-bottom: 1rpx solid #e9e9e9;
    }
  }
}
.opearet {
  width: 100%;
  height: 100rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .checked-image {
    width: 48rpx;
    height: 48rpx;
    margin:0 20rpx 0 0;
    vertical-align: middle;
  }
}
.edit {
  span {
    margin: 0 10rpx;
  }
  img {
    width: 40rpx;
    height: 40rpx;
    vertical-align: middle;
  }
}
.initBtm {
  height: 110rpx;
  line-height: 110rpx;
  line-height: 110rpx;
  background: #ffffff;
  color: #ccc;
  padding-right: 30rpx;
  color: #666;
  font-size: 28rpx;
  box-shadow: 1rpx 0px 4rpx 0px rgba(204, 204, 204, 1);
  .doBtn {
    display: inline-block;
    height: 76rpx;
    line-height: 76rpx;
    font-size: 32rpx;
    border: 1rpx solid #adadad;
    border-radius: 38rpx;
    padding: 0 50rpx;
    color: #666;
    margin-left: 24rpx;
  }
}
.payModal {
  position: absolute;
  top: 0;
  left: 0;
  // bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99999;
  .pay_content {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 850rpx;
    background-color: #fff;
    .title {
      width: 100%;
      height: 90rpx;
      border-bottom: 1rpx solid #e9e9e9;
      color: #333;
      font-size: 34rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      text-align: center;
      line-height: 90rpx;
      display: flex;
      p {
        flex: 1;
        color: #333;
        font-size: 32rpx;
      }
      img {
        width: 45rpx;
        height: 45rpx;
        margin: 20rpx 20rpx 0 0;
        display: inline-block;
      }
    }
    .lineItem {
      width: 100%;
      height: 100rpx;
      border-bottom: 1rpx solid #e9e9e9;
      display: flex;
      flex-direction: row;
      align-items: center;
      box-sizing: border-box;
      padding-left: 30rpx;
      color: #666;
      .cost {
        color: #333;
      }
      p {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #333;
        img {
          margin-left: 0;
        }
        span {
          color: #999;
          font-size: 28rpx;
        }
      }
      img {
        width: 50rpx;
        height: 50rpx;
        margin: 0 30rpx;
      }
    }
    .sureBtn {
      padding:0 30rpx;
      box-sizing: border-box;
      color: #666;
      .total {
        margin: 30rpx 0;
        span {
          color: #ff5453;
          font-size: 36rpx;
        }
      }
      .tip {
        margin: 10rpx 30rpx 50rpx 0;
        font-size: 26rpx;
        color: rgba(153, 153, 153, 1);
      }
      .button {
        // width: 660rpx;
        height: 92rpx;
        background: rgba(74, 100, 234, 1);
        line-height: 92rpx;
        text-align: center;
        color: #fff;
        border-radius: 46rpx;
      }
    }
  }
}
.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0,0,0,.7);
  opacity: 1;
  z-index: 100;
  .out {
    height: 412rpx;
    border-radius: 15rpx;
    width: 650rpx;
    background: #fff;
    z-index: 999;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -206rpx;
    margin-left: -325rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .top {
      flex: 1;
      padding: 110rpx 48rpx 0 48rpx;
      text-align: center;
      span {
        font-size: 34rpx;
        font-family:PingFangSC-Regular,PingFangSC;
        font-weight:400;
        line-height:48rpx;
      }
    }
    .btm {
      height: 100rpx;
      line-height: 100rpx;
      display: flex;
      font-size:34rpx;
      font-family:PingFangSC-Regular,PingFangSC;
      font-weight:400;
      .sure {
        background: #4A64EA;
        color: #fff;
      }
      span {
        flex: 1;
        text-align: center;
      }
      span:nth-child(1) {
        background: #f9f9f9;
      }
      span:nth-child(2) {
        background: #4A64EA;
        color: #fff;
      }
    }
  }
}
</style>
